<template>
    <div style="overflow-x: scroll;">
        <mu-table  v-if="pictures.length"  :fixedHeader="false" class="list-table" :showCheckbox="false" ref="table">
            <mu-thead>
                <mu-tr>
                    <mu-th v-for="header in headers">{{header}}</mu-th>
                </mu-tr>
            </mu-thead>
            <mu-tbody>
                <mu-tr v-for="picture in pictures">
                    <mu-th>{{picture['id']}}</mu-th>
                    <mu-th>{{picture['title']}}</mu-th>
                    <mu-th>{{picture['keywords']}}</mu-th>
                    <mu-th>{{picture['description']}}</mu-th>
                    <mu-th><img :src="picture['thumb']" alt=""></mu-th>
                </mu-tr>
            </mu-tbody>
        </mu-table>
        <div v-else="">

        </div>
        <pagination v-if="pictures.length" :current="page" :total="total" @pageChange="pageChange">
        </pagination>
        <searcher @commited="commited">
        </searcher>
    </div>
</template>
<script>
    export default{
        data() {
            return {
                pictures: [],
                headers: ['ID', 'title', 'keywords', 'description', 'image'],
                page: 1,
                queryParams: {
                    name: '', contract_no: '', phone: '',
                    store_name: '', start_at: '', end_at: '', status: ''
                },
                total: 10,
                open: true,
            }
        },
        created(){
            this.fetchPicture()
        },
        watch: {
            page: function (currVal, oldVal) {
                this.fetchPicture();
            },
        },
        methods: {
            fetchPicture(){
                var self = this;
                self.queryParams.page = self.page;
                self.$http.get('/picture/list', {params: self.queryParams})
                    .then(function (response) {
                        console.log(response)
                        self.total = response.data.total;
                        self.pictures = response.data.data
                    });
            },
            pageChange(page){
                this.page = page;
            },
            commited(){
                this.fetchOrders()
            },
        },
    }
</script>